import { useRef, useState } from "react";

/* 
react 组件通信
父子通信
父->子 就是传数据
- 父组件传递数据 - 在子组件标签上绑定属性
- 子组件接收数据 - 子组件通过props参数接收数据
子-> 父
核心思路 在子组件中调用父组件的函数并传递参数
把子组件中的 sonMsg 变量 传递给父组件
- 先在父组件中定义好函数 ， 并给子组件传递过去
- 子组件接受这个函数 此时可以把参数传递过去 


*/

const Son = (props) => {
	// props是一个对象 包含了父组件传过来的数据  props可以传递任意一个类型的数据  props只读 不可以在子组件修改 只能在父组件修改
	console.log(props);
  // 把方法 onGetMsg解构出来
  const { onGetMsg } = props

  const [sonMsg , setSonMsg] = useState('sonMsg')

	return (
		<div>
			<div>父组件传过来的数据 {props.name}</div>
      <div>jsx={props.child}</div>
      <button onClick={()=> onGetMsg(sonMsg)}>send</button>
		</div>
	);
};

const Newson = props => {
	console.log(props, "Newson的props");
	return <div>{props.children} </div>;
};

function App() {
	const [name, setName] = useState("我是父组件");

  const [msg , setMsg] = useState('')

	const getMsg = msg => setMsg(msg);
	return (
		<div className="app">
			<Son
				name={name}
				isTrue={false}
				list={["vue", "react"]}
				cb={() => console.log("123")}
				child={<span>this is span</span>}
				onGetMsg={getMsg}
			/>
      {/* 操作子组件传递过来的值 */}
      {msg}
			<Newson>
				<div>还可以通过children属性传参</div>
			</Newson>
		</div>
	);
}

export default App;
